<template>
  <div class="search-main">
    <el-row>
      <el-col :span="3">
        <div class="report-name">{{ reportName }}</div>
      </el-col>
      <el-col :span="5">
        <el-date-picker
          v-model="dateValue"
          type="daterange"
          unlink-panels
          value-format="yyyy-MM-dd"
          range-separator="到"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="16" class="com">
        <el-input
          v-if="isShowAxImeiInput"
          v-model="axImei"
          placeholder="请输入AX设备号"
          style="width: 10rem; padding-right: 1rem"
        ></el-input>
        <el-input
          v-model="searchValue"
          placeholder="请输入姓名"
          style="width: 10rem"
        ></el-input>
        <el-button
          type="primary"
          style="margin-left: 1rem"
          icon="el-icon-search"
          @click="searchClick"
          >搜索</el-button
        >
        <el-button type="primary" icon="el-icon-refresh" @click="refreshClick"
          >刷新</el-button
        >
        <el-button
          v-if="isShowExportBtn"
          type="primary"
          icon="el-icon-document-checked"
          @click="exportClick"
          >导出EXCEL</el-button
        >
        <el-button type="primary" icon="el-icon-files"
          >总数:{{ total }}</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>
<script>
import emptyUtil from '@/utils/emptyUtil'
import dateTimeUtil from '@/utils/dateTimeUtil'
export default {
  name: 'Search',
  data () {
    return {
      dateValue: [this.startTime, this.endTime],
      selectValue: '请选择设备',
      searchValue: '',
      axImei: ''
    }
  },
  props: {
    isShowAxImeiInput: { type: Boolean, default: false },
    isShowExportBtn: { type: Boolean, default: true },
    startTime: { type: String, default: '' },
    endTime: { type: String, default: '' },
    reportName: { type: String, default: '' },
    total: { type: Number, default: 0 },
    deviceImeiList: { type: Array, default: function () { return [] } }
  },
  methods: {
    // 搜索事件方法
    searchClick () {
      let obj = {
        startTime: (emptyUtil.isNotBlank(this.dateValue) && this.dateValue.length > 0) ? this.dateValue[0] : null,
        endTime: (emptyUtil.isNotBlank(this.dateValue) && this.dateValue.length > 1) ? this.dateValue[1] : null,
        imei: this.selectValue === '请选择设备' ? '' : this.selectValue,
        searchValue: this.searchValue,
        axImei: this.axImei
      }
      this.$emit('searchClick', obj)
    },
    // 刷新事件方法
    refreshClick () {
      this.dateValue = [dateTimeUtil.getCurrentMonthFirst(), dateTimeUtil.getCurrentMonthLast()]
      this.selectValue = '请选择设备'
      this.searchValue = ''
      this.axImei = ''
      let obj = {
        startTime: dateTimeUtil.getCurrentMonthFirst(),
        endTime: dateTimeUtil.getCurrentMonthLast(),
        imei: null,
        searchValue: null,
        axImei: null
      }
      this.$emit('refreshClick', obj)
    },
    // 导出事件方法
    exportClick () {
      let obj = {
        startTime: (emptyUtil.isNotBlank(this.dateValue) && this.dateValue.length > 0) ? this.dateValue[0] : null,
        endTime: (emptyUtil.isNotBlank(this.dateValue) && this.dateValue.length > 1) ? this.dateValue[1] : null,
        imei: this.selectValue === '请选择设备' ? '' : this.selectValue,
        searchValue: this.searchValue,
        axImei: this.axImei
      }
      this.$emit('exportClick', obj)
    }
  }
}
</script>
<style scoped>
.el-row {
  width: 100%;
  height: 100%;
}
.el-col {
  height: 100%;
  display: flex;
  align-items: center;
}
.search-main {
  width: 100%;
  height: 3rem;
}
.report-name {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  color: #ff9040;
  font-weight: bold;
  padding-left: 1rem;
}
.com {
  padding-left: 1rem;
}
</style>
